<template>
  <div class="locationBox">
    <header>
      <van-search v-model="value" placeholder="请输入城市名或拼音" />
    </header>
    <div class="main">
      <h2>当前定位</h2>
      <ul>
        <li>北京市</li>
      </ul>
      <h2>热门城市</h2>
      <ul>
        <li
          v-for="(item, index) in hotCity"
          :key="index"
          @click="getSpecificCity(item.label)"
        >
          {{ item.label }}
        </li>
      </ul>
      <div class="cityList">
        <van-index-bar>
          <van-index-anchor
            v-for="(item, index) in cityList"
            :key="index"
            :index="item.initial"
          >
            <span class="indexWord">{{ item.initial }}</span>
            <van-cell
              v-for="(citem, cindex) in item.list"
              :key="cindex"
              :title="citem.name"
              @click="getSpecificCity(citem.name)"
            />
          </van-index-anchor>
        </van-index-bar>
      </div>
    </div>
  </div>
</template>

<script>
import { city } from "./city.json";
import { Dialog } from "vant";
import { getHotCity } from "../../../api/index"
export default {
  data() {
    return {
      value: "",
      hotCity: [
        "北京市",
        "上海市",
        "深圳市",
        "广州市",
        "杭州市",
        "南京市",
        "苏州市",
        "成都市",
        "武汉市",
      ],
      cityList: city,
      currentCity: 0,
    };
  },
  methods: {
    getSpecificCity(params) {
      this.value = params;
      let obj = {
        city: this.$store.state.currentCity,
        community: params,
        pagenum: 1,
        pagesize: 10,
      };
      // 提示用户是否确认切换城市
      Dialog.confirm({
        title: "",
        message: `确认将当前城市切换为${params}`,
      })
        .then(() => {
          
          // 将用户输入的城市信息存储为vuex中公共信息
          this.$store.commit("setCity", params.slice(0,2));
          // 跳换至首页显示
          this.$router.push("/home");
        })
        .catch(() => {
          console.log('取消操作');
        });

    },
    async getHotCityList() {
      let { data } = await getHotCity();
      this.hotCity = data
    }
  },
  created() {
    this.getHotCityList()
  }
};
</script>

<style scoped lang='less'>
header {
  height: 88px;
  box-sizing: border-box;
  background: #ff5654;
  padding: 0 76px;
  // padding-top: 16px;
  .van-search {
    padding: 0;
    background-color: inherit;
    // margin-top: 16px;
    padding-top: 16px;
    .van-search__content {
      border-radius: 8px;
      overflow: hidden;
      .van-cell {
        padding: 0;
      }
      vertical-align: top;
      /deep/.van-cell__value {
        font-size: 24px;
        line-height: 55px;
      }
    }
  }
}
.main {
  h2 {
    margin-top: 30px;
    margin-left: 40px;
    margin-bottom: 30px;
    color: #959595;
    font-weight: 400;
    font-size: 24px;
  }
  ul {
    margin: 0 84px;
    overflow: hidden;
    li {
      float: left;
      list-style: none;
      width: 138px;
      height: 50px;
      border-radius: 8px;
      background-color: #e5e5e5;
      color: #959595;
      text-align: center;
      line-height: 50px;
      font-size: 22px;
      margin-left: 84px;
      margin-bottom: 35px;
      &:nth-child(3n-2) {
        margin-left: 0;
      }
    }
  }
  //   margin-top: 82px;
  /deep/.van-index-bar__index {
    font-size: 12px;
    margin-bottom: 16px;
    &:nth-child(1) {
      margin-top: 158px;
    }
  }

  /deep/.van-index-anchor {
    background-color: #ff5654;
    color: #fff;
    background-clip: content-box;
    padding: 0;
    .indexWord {
      margin-left: 20px;
    }
  }

  .van-cell::after {
    border-bottom: 1px solid #e5e5e5;
  }
}
</style>